<template>
  <div class="searchPane" >
    <Input v-model="searchTreeData" clearable search  @on-search="searchTreeModel(searchTreeData)" on-enter="searchTreeModel(searchTreeData)" />
    <!--<RadioGroup v-model="paneType" type="button" size="large">
      <Radio label="类型"></Radio>
      <Radio label="专题"></Radio>
    </RadioGroup>-->
    <!--<Tree :data="layerType" @on-check-change="checkNode" show-checkbox  ref="layerTypeTree" :render="renderContent"></Tree>-->
    <el-tree
      :data="layerType"
      show-checkbox
      ref="tree"
      node-key="Id"
      :filter-node-method="filterNode"
      @check-change="checkNode">
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <span @click="() => selectNode(data)">{{ node.label }}</span>
      <Icon v-if="data.ishistory" type="ios-paper" class="extentTreeNode iconfont icon-lishibanben" @click="() => showHistory(data)"></Icon>
      <Icon v-if="data.IsQuery&&node.checked" type="md-search" class="extentTreeNode iconfont icon-sousuo1" @click="() => queryLayer(data)"></Icon>
      <Icon v-if="data.IsStatistics" type="md-stats" class="extentTreeNode iconfont icon-tongji2" @click="() => statistics(data)"></Icon>
      <Icon v-if="data.IAttachs && data.IAttachs.length>0" class="extentTreeNode iconfont icon-fujian" type="md-cloud-download" @click="() => showIAttach(data)"></Icon>
    </span>
    </el-tree>

    <!--详细信息模态框-->
    <datal-modle ref="detailModal" title="详细信息" number="400" class="iview-historyMd">
      <detail-table  :detailData ="detailDataList"></detail-table>
    </datal-modle>
    <!--历史信息弹出框-->
    <datal-modle ref="historyModal" title="历史版本" number="400" class="iview-historyM">
      <Table border ref="historyTable" :columns="historyColumn" :data="historyData" @on-row-click="hisRowClick" @on-select-cancel="hisRowSelectCancel" @on-select="hisRowSelect" @on-selection-change="hisRowSelectChange"></Table>
    </datal-modle>
    <!--附件信息弹出框-->
    <datal-modle ref="attachModal" title="附件详情" number="400" class="iview-attachM" :fullscreen="fullscreen">
      <Table border :columns="attachColumn" :data="attachData"></Table>
    </datal-modle>
    <!--查看附件-->
    <!--<datal-modle
      ref="attachShowModal"
      title="查看附件"  footer-hide  number="100%">
      <embed :src="attachUrl" type="application/pdf" width="100%" height="100%">
    </datal-modle>-->
    <Modal v-model="attachShowModal" mask-closable  footer-hide fullscreen title="查看附件" class-name="pdfBox">
      <embed :src="attachUrl" type="application/pdf" width="100%" height="100%">
    </Modal>
    <!--图层筛选弹出框-->
    <datal-modle ref="queryModal" title="数据筛选" name="filter" number="400" class="iview-queryM" on-cancel="cancelQuery" :draggable="true">
      <LayerFilter :LayerData="layerData" :mapId="mapId"></LayerFilter>
    </datal-modle>
  </div>
</template>
<script>
import LayerManager from "./LayerManager";
import LayerFilter from "./LayerFilter";
import datalModle from "../public/modle.vue";
import detailTable from "../public/detailTable.vue";
import queryTask from "../JavaScript/QueryTask";
import Bus from "./Bus.js";
//import _global from  './ this.GLOBAL'

export default {
  name: "Search",
  props: {
    mapId: {
      type: String,
      default: "mainMap"
    }
  },
  components: {
    LayerFilter,
    datalModle,
    detailTable
  },
  data() {
    return {
      _globalUrl: this.GLOBAL.layerTypeTreeUrl,
      detailDataList: {
        name: "淳安县总体规划",
        fgfw: "淳安",
        dataTime: "2016年09月21日",
        uploadTime: "2018年01月03日",
        count: "1823个要素",
        descript: "",
        laiyuan: "淳安县域总体规划(2016年-2020年)",
        scsm: "信息中心收集、整理",
        beizhu: ""
      },
      fullscreen: true,
      attachUrl: "./static/Data/9551.pdf",
      layerType: [],
      buttonProps: {
        type: "default",
        size: "small"
      },
      detailModal: false,
      attachShowModal: false,
      detailColumns: [
        {
          title: "Name",
          key: "name"
        },
        {
          title: "Age",
          key: "age"
        },
        {
          title: "Address",
          key: "address"
        }
      ],
      detailData: {
        name: "淳安县总体规划",
        fgfw: "淳安",
        dataTime: "2016年09月21日",
        uploadTime: "2018年01月03日",
        count: "1823个要素",
        descript: "",
        laiyuan: "淳安县域总体规划(2016年-2020年)",
        scsm: "信息中心收集、整理",
        beizhu: ""
      },
      historyModal: false,
      attachModal: false,
      queryModal: false,
      historyColumn: [
        {
          title: "编号",
          type: "index",
          width: 60,
          align: "center"
        },
        {
          title: "数据名称",
          key: "name"
        },
        {
          title: "操作",
          type: "selection",
          width: 60,
          align: "center"
        }
      ],
      historyData: [
        {
          name: "哈哈哈哈多胡说对多的点点滴滴"
        },
        {
          name: "哈哈哈哈多胡说对多的点点滴滴"
        },
        {
          name: "哈哈哈哈多胡说对多的点点滴滴"
        },
        {
          name: "哈哈哈哈多胡说对多的点点滴滴"
        }
      ],
      attachColumn: [
        {
          title: "编号",
          type: "index",
          width: 60,
          align: "center"
        },
        {
          title: "名称",
          key: "name"
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.attachShow(params.index);
                    }
                  }
                },
                "查看"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.attachDown(params.index);
                    }
                  }
                },
                "下载"
              )
            ]);
          }
        }
      ],
      attachData: [
        {
          name: "dhsfhwefggy"
        }
      ],
      layerData: { name: "jjj" },
      paneType: "类型",
      searchTreeData: ""
    };
  },
  created() {
    console.log();
  },

  // var self = this;

  mounted() {
     var self = this;
    Bus.$on(
      "searchbyclick",
      function(data) {
        //
        //var self = this;
        if (data.map.id == self.mapId) {
          var layerArray = self.$refs.tree.getCheckedNodes(true, false);
          queryTask.queryByClick(data, layerArray);
        }
      }.bind(this)
    );
    this.initTree();

    Bus.$on("clearCheck", function(key) {
      // console.log(key);
      self.$refs.tree.setChecked(key, false);
    });
  },
  beforeDestory() {
    Bus.$off("clearCheck", "key");
  },
  watch: {
    searchTreeData(val) {
      this.$refs.tree.filter(val);
    },
    _globalUrl: function(newUrl) {
      if (newUrl != "") {
      }
    }
  },
  methods: {
    initTree() {
      var self = this;
      var userid = this.$route.params.userId;
      //后面可以用传过来的数据做些其他操作
      //......
      // var eurl=this.GLOBAL.addconfig("layerTypeTreeUrl","url");
      // var url=data+"&userId="+userid;
      var url = this.GLOBAL.layerTypeTreeUrl + "&userId=" + userid;
      console.log(this.GLOBAL.layerTypeTreeUrl);
      //http://115.233.209.175:8090/zh-CN/Map/LayerCatalog/GetTreeList?id=0

      //var url ="http://115.233.209.175:8090/zh-CN/map/LayerCatalog/GetTreeList?id=0"+"&userId="+userid;
      //Bus.$on("addloadLayer",function(){
      this.$http.get(url, {}, { emulateJSON: true }).then(
        function(response) {
          var strLayer = JSON.stringify(response.body);
          self.layerType = JSON.parse(strLayer.replace(/text/g, "label"));
          var array = [];
          //this.getIsLaodData(this.layerType,array);
          //this.$refs.tree.setCheckedKeys(array);
        },
        function(error) {
          self.$Message.error("加载地址！");
        }
      );
      //})

      //})
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    searchTreeModel: function(searchTreeData) {
      var m = this;
      /* return this.layerType.filter((blog) => {
          searchTreeData
          console.log(blog.label,searchTreeData)
           console.log(blog.label.match(searchTreeData))
          return blog.tilte.match(searchTreeData)
        })*/
    },
    getIsLaodData: function(data, dataArray) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].Isload) {
          this.checkNode(data[i], true, null);
          dataArray.push(data[i].Id);
        }
        if (data[i].children && data[i].children.length > 0) {
          this.getIsLaodData(data[i].children, dataArray);
        }
      }
    },
    //选中显示图层
    checkNode: function(data, isChecked, child) {
      // debugger
      //console.log(LayerManager)
      if (data.type == "Text") {
        // this.$refs.attachShowModal.datailToggle = true;
        this.attachShowModal = true;
        this.attachUrl = this.GLOBAL.attachUrl + data.ILayer.Config;
      } else {
        LayerManager.addLayer(data, isChecked, this.mapId);
      }
    },
    //点击弹出详细信息
    selectNode: function(data) {
      var m = this;
      if (data.children) {
        m.$refs.detailModal.datailToggle = false;

        return;
      }
      //给数据赋值
      //this.detailData = data.XXXX
      m.$refs.detailModal.datailToggle = true;
      var id = data.Id;

      // "http://115.233.209.175:8090/zh-CN/map/LayerCatalog/GetLayermetadata/?id=" +
      var url = this.GLOBAL.layerData + id;
      this.$http
        .get(
          url,
          {},
          {
            emulateJSON: true
          }
        )
        .then(
          function(response) {
            var strLayer = JSON.stringify(response.body);
            var dataobj = JSON.parse(strLayer);
            m.detailDataList = dataobj;
            // this.historyData = JSON.parse(strLayer.replace(/text/g, "label"));
          },
          function(error) {
            self.$Message.error("加载地址！");
          }
        );
    },
    //展示附件信息
    showIAttach: function(data) {
      //弹出附件信息的模态框
      //this.attachData = data.XXXXX;
      this.attachModal = true;
      var m = this;
      m.$refs.attachModal.datailToggle = !m.$refs.attachModal.datailToggle;
    },
    //统计
    statistics: function(data) {
      this.showIAttach("123");
    },
    //历史详细信息
    hisRowClick: function(row, index) {
      var m = this;
      m.$refs.detailModal.datailToggle = true;

      var id = row.layer.Id;
      var url = this.GLOBAL.layerData + id;
      var url2 =
        "http://115.233.209.175:8090/zh-CN/map/LayerCatalog/GetLayermetadata?id=" +
        id;
      this.$http.get(url, {}, { emulateJSON: true }).then(function(response) {
        var strLayer = JSON.stringify(response.body);
        var detailInfo = JSON.parse(strLayer);
        m.detailDataList = detailInfo;
      });
    },
    //显示历史信息
    showHistory: function(data) {
      var m = this;
      //展示历史版本 给数据赋值
      m.$refs.historyModal.datailToggle = !m.$refs.historyModal.datailToggle;
      var id = data.Id;
      // historyLayer
      var url = this.GLOBAL.historyLayer + id;
      // var url ="http://115.233.209.175:8090/zh-CN/map/LayerCatalog/GetHistroyTreeList?parentId=" +id;
      this.$http.get(url, {}, { emulateJSON: true }).then(function(response) {
        var strLayer = JSON.stringify(response.body);
        var dataobj = JSON.parse(strLayer.replace(/text/g, "label"));
        this.historyData.length = 0;
        for (var i = 0; i < dataobj.length; i++) {
          var hisobj = {
            name: dataobj[i].ILayer.LayerName,
            layer: dataobj[i]
          };

          var hisobj2 = {
            name: dataobj[i].ILayer.LayerName + i,
            layer: dataobj[i]
          };
          m.historyData.push(hisobj);
        }
      });
    },
    //图层过滤
    queryLayer: function(data) {
      var m = this;
      //给子组件传值
      this.layerData = data;
      //this.queryModal = true;
      m.$refs.queryModal.datailToggle = !m.$refs.queryModal.datailToggle;
    },
    /*取消图层过滤*/
    cancelQuery: function() {
      this.$.refs.LayerFilter.clear();
    },
    //历史版本选中
    hisRowSelect: function(all, row) {
      console.log(row);
      //LayerManager.addHisLayer(row.layer, true, this.mapId);
      LayerManager.addLayer(row.layer, true, this.mapId);
    },
    //历史版本取消选中
    hisRowSelectCancel: function(all, row) {
      console.log(row);
      //LayerManager.addHisLayer(row.layer, false, this.mapId);
      LayerManager.addLayer(row.layer, false, this.mapId);
    },
    //历史版本选中状态发生改变
    hisRowSelectChange: function(data) {
      //历史信息选中 或反选后响应的事件
      console.log(data);
    },
    //附件查看
    attachShow: function(index) {
      var m = this;
      // m.$refs.attachShowModal.datailToggle= true;
      this.attachShowModal = true;
    },
    //附件下载
    attachDown: function(index) {
      //一个连接直接下载
      // window.location.href="";
    }
  }
};
</script>

<style>
.extentTreeNode {
  font-size: 13px;
  margin-left: 3px;
}
.detailTable {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ccc;
}
.esriPopup .titlePane{
line-height: 24px !important;
}
.detailTable tbody tr {
  background: #fff;
  font-size: 12px;
  color: #666666;
}
.detailTable tbody td {
  line-height: 15px;
  text-align: left;
  padding: 1px 5px 1px 5px;
  height: 10px;
  border: 1px solid #d6d6d6;
  min-width: 60px;
  max-width: 220px;
}
  .pdfBox .ivu-modal-close .ivu-icon-ios-close{
    color:#0d1721 !important;
  }
</style>
